<template>
    <div>
        <nav-bar>
            <template v-slot:default>商品分类</template>
        </nav-bar>
        <div class="foodsmain">
            <div class="menu">
                <van-collapse v-model="activeName" accordion>
                    <van-collapse-item v-for="item in categories " :title="item.name" :name="item.name" :key="item.id">
                        <van-sidebar v-model="activeKey">
                        <van-sidebar-item @click="getGoods" v-for=" sub in item.children " :title="sub.name" />
                        </van-sidebar>
                    </van-collapse-item>
                </van-collapse>
            </div>
            <div class="goodsshows">
                <div class="goods-top">
                    <van-tabs v-model="active" @click="tabclick">
                        <van-tab title="销量排序"></van-tab>
                        <van-tab title="价格排序"></van-tab>
                        <van-tab title="评论热度"></van-tab>
                    </van-tabs>
                </div>
                <div class="goods-shows">
                    <div>
                        <van-card
                                v-for="item in showGoods" :key="item.id"

                                @click="itemClick(item.id)"
                                :num="item.comments_count"
                                :tag="item.comments_count>=0?'流行':'618'"
                                :price="item.price"
                                :desc="item.updated_at"
                                :title="item.title"
                                :thumb="item.cover_url"
                                :lazy-load="true"
                        />
                    </div>
                </div>

            </div>
        </div>
        <backTop v-show="isbackTop" @bTop="bTop"></backTop>
    </div>
</template>

<script>
    import TabControl from "../../components/content/TabControl/TabControl";
    import NavBar from "../../components/common/navbar/NavBar";
    import {ref,reactive,onMounted,computed, watchEffect,nextTick} from 'vue';
    import  {getCategory,getCategoryGoods} from "../../network/category";
    import BScoll from"better-scroll";
    import backTop from "../../components/common/backTop/backTop";
    import {useRouter} from  "vue-router"

    export default {
        name: "BookSort",
        setup(){
            const router =useRouter();
            let isbackTop = ref(false);
            let activeKey = ref(0);
            let activeName = ref(0);
              let categories= ref([]);
              let active= ref(0);
              let currentOrder=ref('sales');//获取排行类型
              let currentCid=ref(0);//获取分类id
              let bscroll =reactive({});
          //数据模型
            const goods = reactive({
                sales:{page:1,list:[]},
                price:{page:1,list:[]},
                comments_count:{page:1,list:[]},
            })
            //数据模型结束
            //根据排序类型和选择书id返回一个数据返回到showGoods 中，然后再遍历展示
            const showGoods=computed(()=>{
                return goods[currentOrder.value].list;
            });
            //初始化函数，实时响应获取数据
            const init =()=>{
                getCategoryGoods('sales',currentCid.value).then(res=>{
                    goods.sales.list = res.goods.data;
                })
                getCategoryGoods('price',currentCid.value).then(res=>{
                    goods.price.list = res.goods.data;
                })
                getCategoryGoods('comments_count',currentCid.value).then(res=>{
                    goods.comments_count = res.goods.data;
                })
            }
            //初始化结束
            //onMounted()开始
          onMounted(()=>{
              //默认获取菜单数据
              getCategory().then(res=>{
                  categories.value=res.categories;
              })
              init()
              //默认获取商品数据
              getCategoryGoods('sales',currentCid.value).then(res=>{
                  goods.sales.list = res.goods.data;
              })
              //滚动效果

              bscroll = new BScoll(document.querySelector('.goods-shows'),{
                  probeType:3,
                  click:true,
                  pullUpLoad:true
              })
              bscroll.on("scroll",(position)=>{
                  isbackTop.value = (-position.y) > 300
              })
              bscroll.on("pullingUp",()=>{
                  console.log("加载。。。");
                  bscroll.refresh();
                  const page =goods[currentOrder.value].page+1;
                  getCategoryGoods(currentOrder.value,currentCid.value).then(res=>{
                      goods[currentOrder.value].list.push(...res.goods.data);
                      goods[currentOrder.value].page+=1;
                  })
                  //完成上拉，等待数据请求完成，要将新数据展示出来
                  bscroll.finishPullUp();
                  nextTick(()=>{
                      //重新计算高度
                      bscroll && bscroll.refresh();
                  })
              })
          })
            //noMonunt结束

            //获取分类id和排序类型，然后获取数据，返回到goods列表中
            const getGoods =(cid)=>{
                currentCid.value=cid;
                getCategoryGoods(currentOrder.value,currentCid.value).then(res=>{
                    goods[currentCid.value]= res.goods.data;
                })
                init();
            }
            //点击排序，返回一个值，对应currentOrder
            const tabclick = (index)=>{
                let orders = ['sales', 'price','comments_count'];
                currentOrder.value=orders[index];
                //获取了排序选项卡的值
                //通过下面这个方法传值给goods数据模型的list，getCategoryGoods(order='sales',cid=0,page=1)
                getCategoryGoods(currentOrder.value,currentCid.value).then(res=>{
                    //goods列表的list值就等于获取的这个数据。
                    goods[currentOrder.value].list=res.goods.data;
                    nextTick(()=>{
                        //重新计算高度
                        bscroll && bscroll.refresh();
                    })
                })

            }
            //监听
            watchEffect(()=>{
                nextTick(()=>{
                    //重新计算高度
                    bscroll && bscroll.refresh();
                })
            });
            const bTop=()=>{
                bscroll.scrollTo(0,0,300);
            }
          return {
              activeKey,
              categories,
              activeName,
              active,
              tabclick,
              currentCid,
              getGoods,
              goods,
              showGoods,
              bscroll,
              isbackTop,
              bTop,
              //点击事件，传值id跳转到/detail页面
              itemClick:(id)=>{
                  router.push({path:'/detail',query:{id}})
              }
          }
        },
        components:{
            NavBar,
            TabControl,
            backTop
        }
    }
</script>

<style scoped>

.foodsmain{
    height: calc(100vh - 90px);
    margin-top: 45px;
    display: flex;
}
    .goodsshows{
        overflow: hidden;
        width: 300px;
        flex: 4;
}
    .menu{
        margin-top: 45px;
        flex: 2;
        overflow: auto;
        overflow-x: hidden;
    }
    .goodsshows:first-child{
        margin-top: 45px;
        height: 45px;
        background: red;

    }
    .goods-top{
        height: 45px;

    }
    .goods-shows{
        overflow: auto;
        height: calc(100vh - 90px);
    }
</style>